<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目名称">
              <j-input placeholder="请输入项目名称" v-model="queryParam.xmmc"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目编号">
              <j-input placeholder="请输入项目编号" v-model="queryParam.xmbh"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="企业名称">
              <j-input placeholder="请输入企业名称" v-model="queryParam.gsmc"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" key="1" v-has="'invoice:kjfp'"  @click="kpxxOpen()" style="margin-left: 8px"> 开具发票 <a-icon type="edit" /></a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
        </span>

      </a-table>
    </div>

    <lhyg-dk-invoice-modal ref="modalForm" @ok="modalFormOk"></lhyg-dk-invoice-modal>

    <j-modal
      title="开具发票"
      :fullscreen.sync="modal.fullscreen"
      :switchFullscreen="modal.switchFullscreen"
      :visible="visibleKpxx"
      width="1000px"
      okText="确认开票"
      cancelText="取消"
      @ok="handleSubmit"
      @cancel="kpxxClose"
    >
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form :form="form" slot="detail">
          <a-row>
            <a-col :span="16">
              <a-form-item label="发票号码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <a-input v-decorator="['fphm', validatorRules.fphm]" placeholder="请输入发票号码"></a-input>
              </a-form-item>
            </a-col>
            <!--<a-col :span="8" >-->
            <!--  <a-form-item label="发票代码" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
            <!--    <a-input v-decorator="['fpdm', validatorRules.fpdm]" placeholder="请输入发票代码"></a-input>-->
            <!--  </a-form-item>-->
            <!--</a-col>-->
            <a-col :span="8" >
              <a-form-item label="发票样式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['fpys']" placeholder="请输入发票样式" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left">• 购方信息</a-divider>
              </p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['gfmc']" placeholder="请输入购方名称" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="开户行" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['gfkhh']" placeholder="请输入购方开户行" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['gfzh']" placeholder="请输入购方账号" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['gfnsrsbh']" placeholder="请输入购方纳税人识别号" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="地址、电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['gfdzdh']" placeholder="请输入购方地址、电话" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left">• 开票方</a-divider>
              </p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['xfmc']" placeholder="请输入销方名称" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="开户行" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['xfkhh']" placeholder="请输入销方开户行" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['xfzh']" placeholder="请输入销方账号" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['xfnsrsbh']" placeholder="请输入销方纳税人识别号" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="地址、电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['xfdzdh']" placeholder="请输入销方地址、电话" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left">• 发票内容</a-divider>
              </p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="服务名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['fpnr', validatorRules.fpnr]" placeholder="请输入货物或劳物服务名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="开票总金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['kpzje']" placeholder="请输入开票总金额" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="税率" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['sl']" placeholder="请输入税率" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="税额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['se']" placeholder="请输入税额" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="是否邮寄" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag  type="radio" v-decorator="['fpyjtype']" :trigger-change="true" dictCode="fpyj_type" placeholder="请选择是否邮寄"/>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="邮寄地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['yjdz']" placeholder="请输入邮寄地址" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left"></a-divider>
              </p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="开票人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['createBy']" placeholder="请输入开票人" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" >
              <a-form-item label="操作时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['createTime']" placeholder="操作时间" disabled="disabled"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <p>
                <a-divider orientation="left"></a-divider>
              </p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" >
              <a-form-item label="发票文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <!--<j-image-upload isMultiple number="1" v-decorator="['fptp', validatorRules.fptp]" placeholder="请上传发票图片"></j-image-upload>-->
                <!--<j-file-pop ref="filePop"  v-decorator="['fptp', validatorRules.fptp]" @ok="handleFileSuccess"></j-file-pop>-->
                <j-upload v-decorator="['fptp', validatorRules.fptp]" :trigger-change="true"></j-upload>
                <a-input v-decorator="['ids']" type="hidden"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </j-form-container>
    </j-modal>

  </a-card>
</template>

<script>

  import { httpAction, getAction, postAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import LhygDkInvoiceModal from './modules/LhygDkInvoiceModal'
  import JInput from '@/components/jeecg/JInput'
  import pick from 'lodash.pick'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JFilePop from '@/components/jeecg/minipop/JFilePop'
  import JUpload from '@/components/jeecg/JUpload'

  export default {
    name: 'LhygDkInvoiceList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      LhygDkInvoiceModal,
      JInput,
      JImageUpload,
      JFormContainer,
      JFilePop,
      JUpload,
    },
    data () {
      return {
        form: this.$form.createForm(this),
        description: 'lhyg_dk_invoice管理页面',
        visibleKpxx: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
        modal: {
          title: '这里是标题',
          visible: false,
          fullscreen: false,
          switchFullscreen: true,
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'项目名称',
            align:"center",
            dataIndex: 'xmmc'
          },
          {
            title:'项目编号',
            align:"center",
            dataIndex: 'xmbh'
          },
          {
            title:'发票抬头',
            align:"center",
            dataIndex: 'gsmc'
          },
          {
            title:'纳税人识别号',
            align:"center",
            dataIndex: 'sh'
          },
          {
            title:'发票类型',
            align:"center",
            dataIndex: 'fplx'
          },
          {
            title:'开票方',
            align:"center",
            dataIndex: 'kpf'
          },
          {
            title:'开票金额',
            align:"center",
            dataIndex: 'kpje'
          }
        ],
        validatorRules: {
          fphm: {
            rules: [
              { required: true, message: '请输入发票号码!'},
              { pattern: /^[0-9]{20}$/, message: '请输入正确的20位数字发票号码!'},
            ]
          },
         fpdm: {
            rules: [
              { required: true, message: '请输入发票代码!'},
              { pattern: /^[0-9]{12}$/, message: '请输入正确的12位数字发票代码!'},
            ]
          },
          fpnr: {
            rules: [
              { required: true, message: '请输入货物或劳物服务名称!'},
              { pattern: /^.{2,32}$/, message: '请输入正确的货物或劳物服务名称!'},
            ]
          },
          fptp: {
            rules: [
              { required: true, message: '请上传发票!'},
            ]
          },
        },
        url: {
          list: "/dkinvoice/lhygDkInvoice/list",
          delete: "/dkinvoice/lhygDkInvoice/delete",
          deleteBatch: "/dkinvoice/lhygDkInvoice/deleteBatch",
          exportXlsUrl: "/dkinvoice/lhygDkInvoice/exportXls",
          importExcelUrl: "dkinvoice/lhygDkInvoice/importExcel",
          getKpxxUrl: "dkinvoice/lhygDkInvoice/getKpxx",
        },
        dictOptions:{},
      }
    },
    created() {
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      kpxxClose(){
        this.visibleKpxx = false
      },
      //签署合同并发送短信
      kpxxOpen(){
        const that = this;
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else {
          var ids = "";
          var aLlength = this.selectedRowKeys.length;
          for (var a = 0; a < aLlength; a++) {
            if(a==aLlength-1){
              ids += "'" + this.selectedRowKeys[a] + "'";
            }else{
              ids += "'" + this.selectedRowKeys[a] + "',";
            }

          }
          getAction(this.url.getKpxxUrl,{ids: ids}).then((res)=>{
            if(res.success){
              this.visibleKpxx = true;
              this.edit (res.result);
            }else {
              that.$message.error(res.message)
            }
          });
        }
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'fphm','fpdm','fpys','gfmc','gfkhh','gfzh','gfnsrsbh','gfdzdh','xfmc','xfkhh','xfzh','xfnsrsbh','xfdzdh','fpnr','kpzje','sl','se','yjdz','kpr','fptp','createBy','createTime','ids','fpyjtype'))
        })
      },
      handleSubmit() {
        const that = this;

        this.form.validateFields((err, values) => {
          if (!err) {
            values.smscode = that.smscode;
            postAction("/dkinvoice/lhygDkInvoice/hbkp", values).then((res) => {
              if (res.success) {
                this.visibleKpxx = false
                that.$message.success(res.message);
                this.onClearSelected();
                this.loadData();
                // that.$emit('ok');
              } else {
                this.visibleKpxx = false
                that.$message.warning(res.message);
              }
            })
          }
        })
      },
      initDictConfig(){
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .ant-col-sm-16 {
    display: block;
    box-sizing: border-box;
    width: 66.66666667%;
  }
</style>
